<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="icon" th:href="@{/images/favicon.ico}" type="image/x-icon">
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width"/>
    <meta name="author" content="www.yanshisan.cn"/>
    <meta name="robots" content="all"/>
    <title>文章</title>
    <link th:href="@{/font-awesome/css/font-awesome.min.css}" rel="stylesheet" href="../static/font-awesome/css/font-awesome.min.css">
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet" href="../static/layui/css/layui.css"/>
    <link th:href="@{/css/master.css}" rel="stylesheet" href="../static/css/master.css"/>
    <link th:href="@{/css/gloable.css}" rel="stylesheet" href="../static/css/gloable.css"/>
    <link th:href="@{/css/nprogress.css}" rel="stylesheet" href="../static/css/nprogress.css"/>
    <link th:href="@{/css/blog.css}" rel="stylesheet" href="../static/css/blog.css"/><!--决定了样式-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.css">
</head>
<body>
<!--文章顶部导航栏-->
<div class="header">
</div>
<header class="gird-header">
    <div class="header-fixed">
        <div class="header-inner">

            <a href="javascript:void(0)" class="header-logo" id="logo" style="margin-top: 20px">Daji's Blog</a>
            <nav class="nav" id="nav">
                <ul>
                    <li><a href="index.html" th:href="@{/index}">首页</a></li>
                    <li><a href="article.html" th:href="@{/article}" class="active">博客</a></li>
                    <li><a href="message.html" th:href="@{/message}">留言</a></li>
                    <li><a href="link.html" th:href="@{/link}">友链</a></li>
                    <li><a href="diary.html" th:href="@{/diary}">开发日志</a></li>
                    <li><a href="about.html" th:href="@{/about}">关于我</a></li>
                </ul>
            </nav>
            <a th:href="@{/toUserLogin}" class="blog-user" th:if="${session.logineduser}==null">
                <i class="fa fa-user-circle-o"></i>
            </a>

            <!--最右上角的头像和注销 只有用户登陆了,才会显示-->
            <div class="right m-item m-mobile-hide menu" align="right" th:if="${session.logineduser}">
                <br>
                <!--注意下面这个下拉菜单, 必须加一个JavaScript代码才能显示出来 JavaScript代码在下面-->
                <div class="ui dropdown  item">
                    <div class="text">
                        <!--这里有一个th, 让我给删了, 这个th的作用是, 动态显示别的用户的头像. 现在这个头像链接是死代码. 那行代码到lirenmi的项目去找-->
                        <img class="ui avatar image" th:src="${session.logineduser.avatar}">
                        <!--非常重要, model.addAttribute传对象 的前端接收!-->
                        <span th:text="${session.logineduser.nickname}"></span>
                    </div>
                    <!--必须加一个JavaScript代码才能显示出来 JavaScript代码在下面-->
                    <i class="dropdown icon"></i>
                    <div class="menu">
                        <a class="item" th:href="@{/logout}">注销</a>
                    </div>
                </div>
            </div>


            <a class="phone-menu">
                <i></i>
                <i></i>
                <i></i>
            </a>
        </div>
    </div>
</header>

<div class="doc-container" id="doc-container">
    <div class="container-fixed">
        <div class="col-content">
            <div class="inner">
                <article class="article-list bloglist" id="LAY_bloglist">
                    <!--如果搜索不到任何数据，回显错误信息-->
                    <div class="ui mini negative message" th:unless="${#strings.isEmpty(negativeMessage)}" th:text="|提示： ${negativeMessage}|">提示:</div>
                    <section class="article-item zoomIn article" th:each="blog,iterStat : ${blogQueries}" >
                        <!--只有置顶了才显示-->
                        <div class="fc-flag" th:if="${blog.recommend == true}">置顶</div>
                        <h5 class="title">
                            <span class="fc-blue" th:text="${blog.flag}">【原创】</span>
                            <a th:href="@{/article/read/{id}(id=${blog.id})}"  th:text="${blog.title}">.NET Spire.Doc组件</a>
                        </h5>
                        <div class="time">
                            <!--<span class="day">21</span>
                            <span class="month fs-18">1<span class="fs-14">月</span></span>-->
                            <span class="year fs-18 ml10" th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd HH:mm')}">2019-1-20</span>
                        </div>
                        <div class="content">
                            <a th:href="@{/article/read/{id}(id=${blog.id})}" class="cover img-light">
                                <img src="../../static/images/user-avatar/1666.jpg" th:src="${blog.firstPicture}">
                            </a>
                            <!--下面的内容应该是给一个th:text,内容是文章摘要-->
                            <span th:text="${blog.description}">Spire.Doc for .NET是一款由E-iceblue公司开发的专业的Word
                            .NET类库，使用该工具开发人员可以在任意.NET平台（C#，VB.NET，ASP.NET）上快速创建，读取，写入，转换，打印Word文档。作为一个独立的Word
                                组件，Spire.Doc的运行无需安装Microsoft Word。而且，它可以将Microsoft Word文档创建功能集成到开发者的任何.NET应用程序。</span>
                        </div>
                        <div class="read-more">
                            <a th:href="@{/article/read/{id}(id=${blog.id})}" class="fc-black f-fwb">继续阅读</a>
                        </div>
                        <aside class="f-oh footer">
                            <div class="f-fl tags">
                                <span class="fa fa-tags fs-16"></span>
                                <!--
                                    这里的分类标签，能弄嵌套循环就弄，不好弄就算了
                                    thymeleaf 嵌套循环 实例
                                -->
                                <a class="tag" th:each="type : ${blog.types}">
                                    <li th:text="${type.name}">ASP. MVC</li>
                                </a>
                            </div>
                            <div class="f-fr">
									<span class="read">               
										<i class="fa fa-eye fs-16"></i>               
										<i class="num" th:text="${blog.views}">57</i>
									</span>
                                <span class="ml20">
										<i class="fa fa-comments fs-16"></i>               
										<a class="num fc-grey" th:text="${blog.commentCount}">1</a>
									</span>
                            </div>
                        </aside>
                    </section>

                    <div class="page" style="text-align: center;">
                        <a th:href="@{/article(startIndex=${recentStartIndex-pageSize > 0}?${recentStartIndex-pageSize}:0)}">上一页</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <!--
                              第几页能算出来：
                              pagesize：  3
                              startIndex：0   3   6   9    是一个从0开始，每次+pagesize的关系
                              当前页：    1   2    3   4
                              通过观察可得之，当前是第几页就是 recentStartIndex/pageSize+1
                            -->
                        <!--<div class="layui-card layui-bg-cyan" >
                            <button type="button" class="layui-btn">
                                <i class="layui-icon">&#xe65a;</i>
                            </button>
                            第 页，共 页，有 篇文章
                            <button type="button" class="layui-btn">
                                <i class="layui-icon">&#xe65b;</i>
                            </button>
                        </div>-->
                        <font color="#faebd7">第 <span th:text="${recentStartIndex/pageSize+1}"></span> 页，共 <span th:text="${totalPages}"></span> 页，有 <span th:text="${totalBlogs}"></span> 篇文章</font>

                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a th:href="@{/article(startIndex=${recentStartIndex+pageSize})}" >下一页</a>
                    </div>

                </article>
            </div>
        </div>
        <div class="col-other">
            <div class="inner">
                <div class="other-item" id="categoryandsearch">
                    <div class="search">
                        <label class="search-wrap">
                            <form id="search-form" th:action="@{/article/search}">
                                <!-- -9999：默认搜索全部分类 别忘了加上name字段-->
                                <input type="hidden" name="typeId" value="-9999">
                                <input type="text" id="searchtxt" name="title" placeholder="输入关键字搜索文章"/>
                                <span class="search-icon">
					                <i class="fa fa-search" id="submit-btn"></i>
					            </span>
                            </form>
                        </label>
                        <ul class="search-result"></ul>
                    </div>
                    <ul class="category mt20" id="category">
                        <li data-index="0" class="slider"></li>
                        <li data-index="1"><a th:href="@{/article}">全部分类</a></li>
                        <li th:data-index="${iterStat.count+1}" th:each="type,iterStat : ${types}">
                            <!--链接走Controller-->
                            <a th:href="@{/article/type/{id}(id=${iterStat.count})}" th:text="${type.name}">文章分类们</a>
                        </li>
                    </ul>
                </div>
                <!--右边悬浮 平板或手机设备显示-->
                <div class="category-toggle"><i class="layui-icon">&#xe603;</i></div>
                <div class="article-category">
                    <div class="article-category-title">分类导航</div>
                    <a th:href="@{/article}">全部分类</a>
                    <a th:each="type,iterStat : ${types}" th:href="@{/article/type/{id}(id=${iterStat.count})}" th:text="${type.name}">文章分类们</a>
                    <div class="f-cb"></div>
                </div>
                <!--遮罩-->
                <div class="blog-mask animated layui-hide"></div>
                <div class="other-item">
                    <h5 class="other-item-title">热门文章</h5>
                    <div class="inner">
                        <ul class="hot-list-article">
                            <li th:each="article : ${hotArticle}"><a th:href="@{/article/read/{id}(id=${article.id})}" th:text="${article.title}">2018最新版QQ音乐api调用</a></li>
                        </ul>
                    </div>
                </div>
                <div class="other-item">
                    <h5 class="other-item-title">置顶推荐</h5>
                    <div class="inner">
                        <ul class="hot-list-article">
                            <li th:each="recommendBlog : ${recommendBlogs}"><a th:href="@{/article/read/{id}(id=${recommendBlog.id})}" th:text="${recommendBlog.title}">2018最新版QQ音乐api调用</a></li>
                        </ul>
                    </div>
                </div>
                <div class="other-item">
                    <h5 class="other-item-title">最近访客</h5>
                    <div class="inner">
                        <dl class="vistor">
                            <dd><a href="javasript:;"><img
                                    src="https://thirdqq.qlogo.cn/qqapp/101465933/72388EA977643E8F97111222675720B1/100"><cite>Anonymous</cite></a>
                            </dd>
                            <dd><a href="javasript:;"><img
                                    src="https://thirdqq.qlogo.cn/qqapp/101465933/342F777E313DDF5CCD6E3E707BB0770B/100"><cite>Dekstra</cite></a>
                            </dd>
                            <dd><a href="javasript:;"><img
                                    src="https://thirdqq.qlogo.cn/qqapp/101465933/EA5D00A72C0C43ECD8FC481BD274DEEC/100"><cite>惜i</cite></a>
                            </dd>
                            <dd><a href="javasript:;"><img
                                    src="https://thirdqq.qlogo.cn/qqapp/101465933/EF18CEC98150D2442183AA30F05AAD7B/100"><cite>↙Aㄨ计划
                                ◆莪↘</cite></a></dd>
                            <dd><a href="javasript:;"><img
                                    src="https://thirdqq.qlogo.cn/qqapp/101465933/3D8D91AD2BAFD36F5AC494DA51E270E6/100"><cite>.</cite></a>
                            </dd>
                            <dd><a href="javasript:;"><img
                                    src="https://thirdqq.qlogo.cn/qqapp/101465933/B745A110DAB712A0E6C5D0B633E905D3/100"><cite>Lambert.</cite></a>
                            </dd>
                            <dd><a href="javasript:;"><img
                                    src="https://thirdqq.qlogo.cn/qqapp/101465933/E9BA3A2499EC068B7917B9EF45C4D13C/100"><cite>64ღ</cite></a>
                            </dd>
                            <dd><a href="javasript:;"><img
                                    src="https://thirdqq.qlogo.cn/qqapp/101465933/09F92966169272DD7DD9999E709A0204/100"><cite>doBoor</cite></a>
                            </dd>
                            <dd><a href="javasript:;"><img
                                    src="https://thirdqq.qlogo.cn/qqapp/101465933/59991D53192643A1A651383847332EB6/100"><cite>毛毛小妖</cite></a>
                            </dd>
                            <dd><a href="javasript:;"><img
                                    src="https://thirdqq.qlogo.cn/qqapp/101465933/FF34F311DDC43E2AF63BE897BCA24F05/100"><cite>NULL</cite></a>
                            </dd>
                            <dd><a href="javasript:;"><img
                                    src="https://thirdqq.qlogo.cn/qqapp/101465933/59AA25A7627284AE62C8E6EBDC6FE417/100"><cite>吓一跳</cite></a>
                            </dd>
                            <dd><a href="javasript:;"><img
                                    src="https://thirdqq.qlogo.cn/qqapp/101465933/28B021E0F5AF0A4B9B781A24329FE897/100"><cite>如初</cite></a>
                            </dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<footer class="grid-footer">
    <div class="footer-fixed">
        <div class="copyright">
            <div class="info">
                <div class="contact">
                    <a href="https://blog.csdn.net/weixin_44757863/" class="csdn" target="_blank" title="csdn"><i class="fa fa-github"></i></a>
                    <a href="https://wpa.qq.com/msgrd?v=3&uin=396000449&site=qq&menu=yes" class="qq" target="_blank"
                       title="396000449"><i class="fa fa-qq"></i></a>
                    <a href="https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=1134107721@qq.com"
                       class="email" target="_blank" title="1134107721@qq.com"><i class="fa fa-envelope"></i></a>
                    <a th:href="@{/images/weixin_add.png}" target="_blank" class="weixin"><i class="fa fa-weixin"></i></a>
                </div>
                <p class="mt05">
                    Copyright &copy; 2020-2021 大吉 All Rights Reserved <a href="http://beian.miit.gov.cn" target="_blank" style="color: inherit;">鲁ICP备2020049465号</a>
                </p>
            </div>
        </div>
    </div>
</footer>
<script th:src="@{/layui/layui.js}" src="../static/layui/layui.js"></script>
<script th:src="@{/js/yss/gloable.js}" src="../static/js/yss/gloable.js"></script>
<script th:src="@{/js/plugins/nprogress.js}" src="../static/js/plugins/nprogress.js"></script>
<script>NProgress.start();</script>
<script th:src="@{/js/yss/article.js}" src="../static/js/yss/article.js"></script>
<script src="https://cdn.staticfile.org/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.js"></script>

<script>
    //必须加上这里, 否则最右上角的下拉菜单的注销不会显示
    /*
        2020/12/2 调试了3小时都没找出来下拉注销不显示的原因。就是因为下面的 jquery和semantic版本的问题，必须是以下两个版本组合：
        src="https://cdn.staticfile.org/jquery/3.1.1/jquery.min.js"
        src="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.js
        最开头的link里面引用的css也要对（上面是js）
            <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.css">
    */
    $('.ui.dropdown').dropdown({
        on: 'hover'
    });

    /*
        需求：不使用 <input type="submit"> ; 转而使用icon，或者button 提交form表单
        解决方案： 使用jQuery的方法。第一行选中id为submit-btn的 icon/button
                   第二行选择id为search-form的form表单
                   这样就可以实现用icon或button提交表单了
     */
    $('#submit-btn').click(function () {
        $('#search-form').submit();
    });

    window.onload = function () {
        NProgress.done();
    };
</script>
</body>
</html>
